import React, { Component } from 'react'
import Swiper from 'swiper'
import axios from 'axios'
import '../../../assets/swiper/swiper.min.css'

export default class banner extends Component {
    constructor(props) {
        super(props);
        this.state = {
            bannerList: [],
        }
    }
    
    componentDidUpdate(){
        var swiper = new Swiper('.banner', {
            slidesPerView: 1,
            spaceBetween: 30,
            loop: true,
            autoplay: {
                delay: 2500,
                disableOnInteraction: false,
            },
            pagination: {
                el: '.swiper-pagination',
                clickable: true,
            },
        });
        
    }

    componentDidMount() {
        this.getBanner()
    }

    getBanner(){
        axios.get("https://shopapi.smartisan.com/mobile/home").then((res)=>{
            console.log(res.data.data[0].list)
            this.setState({
                bannerList:res.data.data[0].list,
            })
        })
    }

    render() {
        return (
            <div className="bannerA">
                <div className="swiper-container banner">
                    <div className="swiper-wrapper">{
                        this.state.bannerList.map((item)=>{
                           return <div className="swiper-slide" key={item.url}>
                               {/* <NavLink > */}
                               <img src={item.image} />
                           </div>
                        })
                    }
                    </div>
                    {/* <!-- Add Pagination --> */}
    <div className="swiper-pagination"></div>
                </div>
            </div>
        )
    }
}

